<template>
  <div class="app-container">
    <MarkdownRenderer :contents="demoContents" />
  </div>
</template>

<script setup lang="ts">
import MarkdownRenderer from './components/MarkdownRenderer.vue'

const demoContents = [
  '# 数学公式\n$$\\int_{-\\infty}^\\infty e^{-x^2}dx$$\n$$v=\\sqrt{\\pi}$$',
  '## 代码示例\n```js\nconst deepClone = (obj) => JSON.parse(JSON.stringify(obj))\nlet v = document.getElementById("bookId");\nint a=1, b=2, c=3;\nv=list[:1:-1]\n```',
  '### 图片展示\n![示例图片](https://picsum.photos/600/400)'
]
</script>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .app-container {
    padding: 1rem;
  }
}
</style>